<!--
  生产登记
  props：
    items array 子项数据 default：[
      { title: "生产登记", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg.png") },
      { title: "生产检查", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg2.png") },
      { title: "构件出库", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg3.png") },
      { title: "构件查询", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg4.png") }
    ]
-->
<template>
  <div class="register-wrapper">
    <div class="item-wrapper" v-for="(item, i) in items" :key="item.title + i">
      <div class="bg-box">
        <img :src="item.src" alt="background">
      </div>
      <div class="content-box">
        <div class="title">{{item.title}}</div>
        <div class="subtitle">{{item.subtitle}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "qm-register-list",
  props: {
    items: {
      type: Array,
      default: () => [
        { title: "生产登记", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg.png") },
        { title: "生产检查", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg2.png") },
        { title: "构件出库", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg3.png") },
        { title: "构件查询", subtitle: "登记构件生产内容", src: require("/static/img/ungrouped/item-bg4.png") }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.register-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(47px * var(--ratio));
  padding: calc(24px * var(--ratio)) calc(16px * var(--ratio)) 0;
  background-image: url("../../../../static/img/ungrouped/backdrop-filter.png");
  background-size: 100%;
}
.item-wrapper {
  position: relative;
  flex: 0 0 50%;

  .bg-box {
    img {
      width: 100%;
    }
  }

  .content-box {
    padding-left: calc(40px * var(--ratio));
    padding-top: calc(50px * var(--ratio));
    // display: flex;
    // align-content: center;
    // flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-maintitle);
    color: #fff;

    .subtitle {
      // flex: 0 0 100%;
      font-size: var(--font-size-subcontent-2);
    }

    .title {
      // flex: 0 0 100%;
      font-weight: bold;
    }
  }
}
</style>
